{namespace n=GeorgRinger\News\ViewHelpers}
{namespace ngoos=Ngoos\ViewHelpers}

<f:layout name="Detail.html" />

<!--
	=====================
		News/Detail.html
-->

<f:section name="content">
	<f:if condition="{newsItem}">
		<f:then>
			<n:format.nothing>
				<f:if condition="{newsItem.alternativeTitle}">
					<f:then>
						<n:titleTag>
							<n:format.htmlentitiesDecode>{newsItem.alternativeTitle}</n:format.htmlentitiesDecode>
						</n:titleTag>
					</f:then>
					<f:else>
						<n:titleTag>
							<n:format.htmlentitiesDecode>{newsItem.title}</n:format.htmlentitiesDecode>
						</n:titleTag>
					</f:else>
				</f:if>
				<f:render partial="Detail/Opengraph" arguments="{newsItem: newsItem, settings:settings}" />
			</n:format.nothing>
			<div class="news-header text-center">
				<h3>{newsItem.title}</h3>
			</div>
			<div class="news-footer text-center clearfix">
                <!-- date -->
                <span class="news-list-date">
                    <f:translate key="LLL:fileadmin/templates/frontend/plugin/news/Language/locallang.xml:releaseDate" /><f:format.date format="{f:translate(key:'dateFormat')}">{newsItem.datetime}</f:format.date>
                    <f:if condition="{newsItem.author}">
                        &nbsp;&nbsp;<f:translate key="LLL:fileadmin/templates/frontend/plugin/news/Language/locallang.xml:author" />{newsItem.author}
                    </f:if>
                </span>
                <!-- JiaThis Button BEGIN -->
                <div class="jiathis_style clearfix">
                    <span class="jiathis_txt">分享到：</span>
                    <a class="jiathis_button_qzone"></a>
                    <a class="jiathis_button_tsina"></a>
                    <a class="jiathis_button_tqq"></a>
                    <a class="jiathis_button_weixin"></a>
                    <a class="jiathis_button_renren"></a>
                    <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>
                    <a class="jiathis_counter_style"></a>
                </div>
                <!-- JiaThis Button END -->
			</div>
			<f:if condition="{newsItem.contentElements}">
				<!-- content elements -->
				<f:cObject typoscriptObjectPath="lib.tx_news.contentElementRendering">{newsItem.contentElementIdList}</f:cObject>
			</f:if>

			<f:render partial="Detail/FalMediaContainer" arguments="{media: newsItem.falMedia, settings:settings}" />
			<f:render partial="Detail/MediaContainer" arguments="{media: newsItem.media, settings:settings}" />

			<!-- main text -->
			<div class="news-text-wrap">
                <f:if condition="{newsItem.teaser}">
                    <f:format.html>{newsItem.teaser}</f:format.html><br/>
                </f:if>
				<f:format.html>{newsItem.bodytext}</f:format.html>
			</div>

			<f:if condition="{settings.detail.disqusShortname}">
				<n:social.disqus newsItem="{newsItem}"
								 shortName="{settings.detail.disqusShortname}"
								 link="{n:link(newsItem:newsItem, settings:settings, uriOnly:1, configuration:'{forceAbsoluteUrl:1}')}" />
			</f:if>

			<!-- related things -->
			<div class="news-related-wrap">

				<f:if condition="{newsItem.allRelatedSorted}">
					<!-- Related news records -->
					<div class="news-related news-related-news">
						<h4>
							<f:translate key="related-news" />
						</h4>
						<ul>
							<f:for each="{newsItem.allRelatedSorted}" as="related">
								<li>
									<span class="news-related-news-date"><f:format.date format="{f:translate(key:'dateFormat')}">{related.datetime}</f:format.date></span>
									<n:link newsItem="{related}" settings="{settings}" title="{related.title}">
										{related.title}
									</n:link>
								</li>

							</f:for>
						</ul>
					</div>
				</f:if>

				<f:if condition="{newsItem.relatedFiles}">
					<!-- Related files -->
					<div class="news-related news-related-files">
						<h4>
							<f:translate key="related-files" />
						</h4>
						<ul>
							<f:for each="{newsItem.relatedFiles}" as="relatedFile">
								<li>
									<span class="news-related-files-link">
										<n:format.fileDownload file="uploads/tx_news/{relatedFile.file}" configuration="{settings.relatedFiles.download}">
											<f:if condition="{relatedFile.title}">
												<f:then>
													{relatedFile.title}
												</f:then>
												<f:else>
													{relatedFile.file}
												</f:else>
											</f:if>
										</n:format.fileDownload>
									</span>
									<span class="news-related-files-size">
										<n:format.fileSize file="uploads/tx_news/{relatedFile.file}" format="{settings.relatedFiles.fileSizeLabels}" />
									</span>
								</li>
							</f:for>
						</ul>
					</div>
				</f:if>

				<f:if condition="{newsItem.falRelatedFiles}">
					<!-- FAL related files -->
					<div class="news-related news-related-files">
						<h4>
							<f:translate key="related-files" />
						</h4>
						<ul>
							<f:for each="{newsItem.falRelatedFiles}" as="relatedFile">
								<li>
									<span class="news-related-files-link">
										<n:format.fileDownload file="{relatedFile.originalResource.publicUrl}" configuration="{settings.relatedFiles.download}">
											<f:if condition="{relatedFile.originalResource.title}">
												<f:comment><!-- Todo: Remove format.raw() if using title/name outside cObject context--></f:comment>
												<f:then>
													{relatedFile.originalResource.title -> f:format.raw()}
												</f:then>
												<f:else>
													{relatedFile.originalResource.name -> f:format.raw()}
												</f:else>
											</f:if>
										</n:format.fileDownload>
									</span>
									<span class="news-related-files-size">
										{relatedFile.originalResource.size -> f:format.bytes()}
									</span>
								</li>
							</f:for>
						</ul>
					</div>
				</f:if>

				<f:if condition="{newsItem.relatedLinks}">
					<!-- Related links -->
					<div class="news-related news-related-links">
						<h4>
							<f:translate key="related-links" />
						</h4>
						<ul>
							<f:for each="{newsItem.relatedLinks}" as="relatedLink">
								<li>
									<f:link.page pageUid="{relatedLink.uri}" title="{relatedLink.title}" target="{n:targetLink(link:relatedLink.uri)}">{f:if(condition: relatedLink.title, then: relatedLink.title, else: relatedLink.uri)}</f:link.page>
									<f:if condition="{relatedLink.description}"><span>{relatedLink.description}</span></f:if>
								</li>
							</f:for>
						</ul>
					</div>
				</f:if>
			</div>

            <!-- 多说评论框 start -->
            <div class="ds-thread" data-thread-key="<f:cObject typoscriptObjectPath='domain'/>-news-{newsItem.uid}" data-title="{newsItem.title}"></div>
            <!-- 多说评论框 end -->

            <!-- 多说公共JS代码 start -->
            <script type="text/javascript">
                var duoshuoQuery = {short_name:"ngoos"};
                (function() {
                    var ds = document.createElement('script');
                    ds.type = 'text/javascript';ds.async = true;
                    ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
                    ds.charset = 'UTF-8';
                    (document.getElementsByTagName('head')[0]
                    || document.getElementsByTagName('body')[0]).appendChild(ds);
                })();
            </script>
            <!-- 多说公共JS代码 end -->

            <!-- 赏一个 -->
            <script type="text/javascript">
                (function($){
                    $(function(){
                        var paymentContent = $('.tx-payment').clone();
                        $('.tx-payment').remove();
                        $('.ds-thread').before(paymentContent);
                    });
                })(jQuery);
            </script>

            <f:if condition="{settings.backPid}">
                <!-- Link Back -->
                <div class="error-btn">
                    <f:link.page pageUid="{settings.backPid}">
                        <f:translate key="back-link" />
                    </f:link.page>
                </div>
            </f:if>
            <br />

		</f:then>
		<f:else>

		</f:else>
	</f:if>
</f:section>